/*
* 该组件是用于去检测我们前端页面的是否需要登录
* 1. 如果不需要登录，则直接显示
* 2. 如果要登录，则必须进行登录后才可以查看
*
* 这样组件的功能 类似 vue-router 的路由守卫，在 react 里面路由守卫的功能需要开发者自行实现。
* */

import React, {Component} from 'react';
import {Redirect, Route} from 'react-router-dom';

class CheckAuth extends Component {
    render() {
        console.log(this.props);
        let {routes, location} = this.props;
        let pathname = location.pathname;
        // routes 是我们的路由隐射表
        // 根据当前的 pathname 去路由隐射表里面获取到当前的路由规则，然后根据路由规则里面的 needAuth 判断是否需要登录
        let targetRoute = routes.find(item => item.path === pathname);

        // 1. 是否可以在路由隐射表里面查找到用户定义好的路由
        if (!targetRoute) {
            return <Redirect to='/404'></Redirect>
        }

        // 2. 获取用户的登录标识
        let isLogin = localStorage.getItem('userToken');

        // 2.1 如果用户没有登录，而当前访问的页面不需要登录，则直接返回相关的路由信息
        if (!isLogin && !targetRoute.needAuth) {
            return <Route to={targetRoute.path} component={targetRoute.component}></Route>
        } else if (!isLogin && targetRoute.needAuth) {
            // 2.2 用户没有登录，并且当前页面是需要登录后才可以访问，则我们重定向到登录页面
            return <Redirect to="/login"></Redirect>
        } else {
            // 2.3 用户已经登录
            // 2.3.1 访问的还是登录页面，则重定向到其他页面
            if (pathname == '/login') {
                return <Redirect to='/news'></Redirect>
            } else {
                return <Route to={targetRoute.path} component={targetRoute.component}></Route>
            }
        }
    }
}

export default CheckAuth;
